<template>
  <div class="app-container">
    <el-form
      :model="postForm"
      v-loading="formLoading"
      :rules="rules"
      ref="postForm"
      label-width="220px"
      label-position="right"
    >
      <div class="font-family-h font-bold margin-t50 margin-b40">
        <i class="square"></i>基本信息
      </div>
      <el-form-item label="课程名称：" prop="name">
        <el-input
          :maxlength="80"
          v-model="postForm.name"
          placeholder="建议字数在15字以内，最多不超过40字"
          style="width: 420px"
        ></el-input>
      </el-form-item>
      <el-form-item label="*选择讲师：">
        <el-select v-model="postForm.lecturerId" placeholder="请选择老师">
          <el-option
            v-for="item in lecturerList"
            :key="item.lecturerId"
            :label="item.name"
            :value="item.lecturerId"
          ></el-option>
        </el-select>
        <el-button class="el-btn" @click="$router.push({name: 'lecturers'})">添加讲师</el-button>
      </el-form-item>

      <el-form-item label="课程简介：" prop="intro">
        <el-input
          :maxlength="80"
          v-model="postForm.intro"
          placeholder="建议字数在15字以内，最多不超过40字"
          style="width: 420px"
        ></el-input>
      </el-form-item>

      <el-form-item label="*课程分类：">
        <el-select
          v-model="postForm.parentCatId"
          placeholder="请选择一级类别"
          @change="selectFirst()"
          style="width:150px"
        >
          <el-option
            v-for="item in parentOptions"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width:150px"
          v-model="postForm.childCatId"
          placeholder="请选择二级类别"
          @change="selectSecond()"
        >
          <el-option
            v-for="item in secondList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select style="width:150px" v-model="postForm.childCatIds" placeholder="请选择三级类别">
          <el-option
            v-for="item in thirdList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-button @click="$router.push({ name: 'courseCategory' })" class="el-btn">添加分类</el-button>
      </el-form-item>

      <!-- <el-form-item v-if="postForm.parentCatId == parentOptions[1].catId" label="*添加系统方案课程：">
        <el-button type="primary" @click="showCourse = true">选择课程</el-button>
        <div v-if="courseTable.length>0">
          <p>已选课程:</p>
          <el-table :data="courseTable">
            <el-table-column label="课程图片">
              <template slot-scope="scope">
                <img :src="scope.row.courseAvatar" alt width="60" height="60" />
              </template>
            </el-table-column>
            <el-table-column label="课程名称" prop="name"></el-table-column>
            <el-table-column label="价格" prop="price"></el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="deleteCourse(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>-->
      <el-form-item label="*课程轮播：">
        <div class="clearfix">
          <el-upload
            :action="imageUploadUrl"
            list-type="picture-card"
            name="avatar"
            :file-list="postForm.banner"
            :limit="5"
            :before-upload="handleBeforeUpload"
            :on-success="handleBannerSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div class="el-upload__tip" slot="tip">只能上传图片文件，且不超过3MB（第一张作为缩略图）</div>
        </div>
      </el-form-item>

      <el-form-item label="课程视频(MP4格式)：" prop="courseVideo">
        <el-upload
          class="upload-demo"
          name="file"
          :action="videoUploadUrl"
          :show-file-list="false"
          :data="formData"
          :before-upload="beforeVideoUpload"
          :on-success="handleVideoSuccess"
          :on-progress="uploadVideoProcess"
          drag
        >
          <video
            v-if="postForm.courseVideo && !videoFlag"
            controls="controls"
            style="width:100%;height:100%;"
          >
            <source :src="postForm.courseVideo" type="video/mp4" />您的浏览器不支持视频播放。
          </video>
          <el-progress
            v-if="videoFlag"
            type="circle"
            :percentage="videoUploadPercent"
            style="margin-top:1.9rem"
          ></el-progress>
          <template v-else>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将视频拖到此处，或
              <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">只能上传MP4/文件，且不超过100MB（点击视频画面处可更换视频）</div>
          </template>
        </el-upload>
      </el-form-item>

      <el-form-item label="观看权限：" prop="permission">
        <el-select
          v-model.number="postForm.permission"
          clearable
          placeholder="请选择"
          style="width: 200px"
        >
          <el-option
            v-for="(key, value) in coursePermitOptions"
            :key="key"
            :label="value"
            :value="key"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="课程价格（元）："
        prop="price"
        v-show="postForm.permission == 17 || postForm.permission == 18"
      >
        <el-input
          type="number"
          v-model.number="postForm.price"
          min="0"
          style="width: 420px"
          placeholder="请输入课程价格"
        ></el-input>
      </el-form-item>

      <el-form-item label="默认购买次数：">
        <el-input v-model.number="postForm.virtualPlays" type="number" style="width: 120px"></el-input>
        <!-- <span>（在课程列表中的排序，数值越大排序越前）</span> -->
      </el-form-item>

      <el-form-item label="课程排序：">
        <el-input v-model.number="postForm.sort" type="number" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="可使用欧币数量：">
        <el-input v-model.number="postForm.deduction" type="number" style="width: 120px"></el-input>
      </el-form-item>
      <div class="font-family-h font-bold margin-t50 margin-b40">
        <i class="square"></i>上架设置
      </div>
      <el-form-item label="是否上架：">
        <el-radio-group v-model.number="postForm.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="-2">否</el-radio>
        </el-radio-group>
        <p v-if="isEdit">{{postForm.status == 3 ?'待审核' :''}}</p>
      </el-form-item>
      <!-- <el-form-item label="是否上热门：">
        <el-radio-group v-model.number="postForm.hotCourse">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>-->
      <div class="font-family-h font-bold margin-t50 margin-b40">
        <i class="square"></i>模块设置
      </div>

      <div class="app-container">
        <el-checkbox label="课程简介：" v-model="postForm.showDesc"></el-checkbox>
        <el-form-item label="课程详情：" v-show="postForm.showDesc">
          <tinymce :height="300" v-model="postForm.desc" style="width: 705px;"></tinymce>
        </el-form-item>
      </div>
      <div class="app-container">
        <el-checkbox label="课程目录：" v-model="postForm.showCourseCatalog"></el-checkbox>
        <div v-show="postForm.showCourseCatalog">
          <el-radio v-model.number="postForm.catalog" :label="1">视频目录</el-radio>
          <el-radio v-model.number="postForm.catalog" :label="0">音频目录</el-radio>

          <el-form-item label="是否试看：" v-if="postForm.catalog == 1||postForm.catalog == 0">
            <el-radio v-model.number="showWatchPermission" :label="1">是</el-radio>
            <el-radio v-model.number="showWatchPermission" :label="0">否</el-radio>
          </el-form-item>
          <el-form-item label="设置试看第几节：" v-if="showWatchPermission == 1">
            <div v-for="(item,index) in watchPermission" :key="index">
              <el-input-number v-model="item.page" :step="1" step-strictly="true" size="mini"></el-input-number>
              <span style="padding:0 5px;">节</span>
              <i class="el-icon-circle-plus-outline" @click="addArray(1)"></i>
              <el-button size="mini" @click="addArray(item)">删除</el-button>

              <span v-if="index==0" style="color:#4596ff">（添加试看节数）</span>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="app-container">
        <el-checkbox label="方案资料：" v-model="postForm.showDatum"></el-checkbox>

        <el-form-item label="关联资料" v-show="postForm.showDatum">
          <el-table
            v-show="postForm.datumArr.length > 0"
            :data="postForm.datumArr"
            class="c-width40"
            :show-header="true"
            size="mini"
            :border="true"
            style="width:600px;"
          >
            <el-table-column label="资料名称" align="center">
              <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.name }}</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="cancelRel(1, scope.$index)">取消关联</el-button>
              </template>
            </el-table-column>
            <el-table-column label="是否允许下载" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.downloadstatus">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column label="是否允试看" align="center">
              <template slot-scope="scope">
                <el-radio-group v-model="scope.row.lookstatus">
                  <el-radio :label="0">否</el-radio>
                  <el-radio :label="1">是</el-radio>
                </el-radio-group>
                <br />
                <span v-if="scope.row.lookstatus > 0">
                  试看
                  <el-input style="width:60%" v-model="scope.row.lookstatus" placeholder="1"></el-input>页
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-button
            :disabled="postForm.datumArr.length==100"
            @click="addRelObj(1,postForm.datumArr)"
          >添加资料</el-button>
          <span class="margin-l10 fc">最多可添加100个</span>
        </el-form-item>
      </div>
      <div class="app-container" style="margin-bottom:50px;">
        <el-checkbox label="课程评论：" v-model="postForm.showComment"></el-checkbox>
      </div>
    </el-form>
    <el-button
      type="primary"
      v-loading.fullscreen="btnLoading"
      icon="el-icon-check"
      style="margin:0 auto;display:block"
      @click="submitForm"
    >保存</el-button>
    <addRelated
      v-if="isShowAddRelated"
      :columnId="postForm.columnId"
      :relType="relType"
      :objData="objData"
      @hideAddRelated="hideAddRelated"
    ></addRelated>
    <el-dialog title="课程选择" :visible.sync="showCourse">
      <el-row>
        <el-col :span="12">
          <el-input v-model="searchCourse" placeholder="请输入课程名称"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button icon="el-icon-search" type="info" @click="getCouresList()">搜索</el-button>
        </el-col>
      </el-row>

      <el-table :data="courseList" tooltip-effect="dark" @selection-change="getCourseId">
        <el-table-column type="selection"></el-table-column>

        <el-table-column label="课程图片" style="padding:5px 0">
          <template slot-scope="scope">
            <img :src="scope.row.courseAvatar" width="50" height="50" />
          </template>
        </el-table-column>
        <el-table-column label="课程名称" prop="name"></el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="currentPage1"
        :total="courseTotal"
      ></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showCourse = false">取 消</el-button>
        <el-button type="primary" @click="submitCourse()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import addRelated from "@/views/courseColumn/components/addRelated.vue"; // 引入关联组件
import { getLecturerList } from "@/api/lecturer";
import {
  getCourseCategory,
  createCourseCategory,
  updateCourseCategory,
  getParentCategories,
  getChildCategories
} from "@/api/courseCategory";
import {
  getPermissionOptions,
  getCourse,
  createCourse,
  updateCourse,
  getCourseList
} from "@/api/course";
import { getQiniuToken } from "@/api/qiniu";
var courseTmp = [];
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validatePrice = (rule, value, callback) => {
      if (this.postForm.permission != 19) {
        if (!value) {
          callback(new Error("请输入课程价格"));
        } else {
          if (value < 0) {
            callback("价格不能小于0");
          } else {
            callback();
          }
        }
      } else {
        callback();
      }
    };
    return {
      showWatchPermission: null,
      showCourse: false,
      rules: {
        name: [{ required: true, message: "请输入课程名称", trigger: "blur" }],
        intro: [{ required: true, message: "请输入课程简介", trigger: "blur" }],
        lecturer: [
          { required: true, message: "请选择老师", trigger: "change" }
        ],
        permission: [
          { required: true, message: "请选择观看权限", trigger: "change" }
        ],
        price: [{ required: true, trigger: "blur", validator: validatePrice }]
      },
      btnLoading: false,
      videoUploadUrl: "http://upload-z2.qiniup.com",
      secondList: [],
      thirdList: [],
      parentOptions: [],
      postForm: {
        datumArr: [],
        courseType: null,
        banner: [],
        lecturerId: null,
        name: "",
        intro: "",
        deduction: null,
        childCatIds: null,
        courseVideo: "",
        socialArr: [],
        examArr: [],
        permission: null,
        price: null,
        virtualPlays: null,
        sort: null,
        status: 1,
        desc: "",
        showDesc: false,
        showCourseCatalog: false,
        showDatum: false,
        showComment: false,
        catalog: null,
        watchPermission: "",
        parentCatId: null,
        childCatId: null
      },
      watchPermission: [{ page: 0 }],
      lecturerList: [],
      forstSortList: [],
      relType: null,
      isShowAddRelated: false,
      parentId: "",
      childId: "",
      imageUploadUrl: process.env.BASE_API + "/common/course/imageUpload",
      videoFlag: false,
      videoUploadPercent: 0.0,
      objData: [],
      baseUrl: "",
      formData: {
        token: null
        // key: null
      },
      formLoading: false,
      coursePermitOptions: {},
      searchCourse: "",
      courseTotal: null,
      currentPage1: 1,
      courseList: [],
      courseTable: [],
      courseIdList: [],
      listQuery: {
        limit: 5,
        page: 1,
        type: "noColumn"
      }
    };
  },
  methods: {
    getName(item) {
      console.log(item);
    },
    addArray(val) {
      if (val == 1) {
        this.watchPermission.push({ page: 0 });
      } else {
        for (let i = 0; i < this.watchPermission.length; i++) {
          const element = this.watchPermission[i].page;
          if (val.page == element) {
            this.watchPermission.splice(i, 1);
          }
        }
      }
    },
    getCourseId(val) {
      console.log(val);
      // 选择多选框时插入的数组
      this.courseIdList = val;
    },
    array_diff(a, b) {
      for (var i = 0; i < b.length; i++) {
        for (var j = 0; j < a.length; j++) {
          if (a[j].courseId == b[i].courseId) {
            a.splice(j, 1);
            j = j - 1;
          }
        }
      }
      return a;
    },
    submitCourse(val) {
      this.array_diff(this.courseIdList, this.courseTable);
      console.log(this.array_diff(this.courseIdList, this.courseTable));

      // 取选中课程的Id
      var submitCourseId = [];
      for (let i = 0; i < this.courseIdList.length; i++) {
        const element = this.courseIdList[i];
        submitCourseId.push(element.courseId);
      }
      //取显示课程的Id
      var tableId = [];
      for (let k = 0; k < this.courseTable.length; k++) {
        const element = this.courseTable[k];
        tableId.push(element.courseId);
      }
      //验证选择课程是否与显示课程重复
      // if (this.isArrayContain(tableId, submitCourseId)) {
      //   this.$message("与已选课程重复");
      //   return;
      // }
      //选中的和原来有的全部链接并提交
      this.courseTable = this.courseIdList.concat(this.courseTable);
      this.courseIdList = this.courseTable;
      submitCourseId = submitCourseId.concat(tableId);
      this.postForm.course = submitCourseId;
      this.showCourse = false;
    },
    deleteCourse(index) {
      //删除一条数据
      this.courseTable.splice(index, 1);
      //放入缓存，以防涮新后还是以前数据
      //取显示课程的Id
      var id = [];
      for (let i = 0; i < this.courseTable.length; i++) {
        const element = this.courseTable[i];
        id.push(element.courseId);
      }
      if (id == false) {
        id = 0;
      }
      this.postForm.course = id;
    },
    //获取课程列表
    getCouresList() {
      let data = {
        name: this.searchCourse,
        page: 1,
        limit: 5,
        type: "noColumn"
      };
      getCourseList(data).then(res => {
        this.courseList = res.data.data.list.data;
        this.courseTotal = res.data.data.list.total * 2;
      });
    },
    submitForm() {
      var data = this.postForm;
      if (this.btnLoading) {
        return;
      }

      // courseType  0视频1.音频2.VIP 六欧学院
      if (data.name == "") {
        this.$message.error("请添加课程名称");
        return;
      } else if (data.lecturerId == null) {
        this.$message.error("请添加讲师");
        return;
      } else if (data.intro == "") {
        this.$message.error("请添加课程简介");
        return;
      } else if (data.childCatIds == null || data.childCatIds == "") {
        this.$message.error("请添加分类");
        return;
      } else if (data.banner.length == 0) {
        this.$message.error("添加至少一张轮播图");
        return;
      } else if (data.permission == null) {
        this.$message.error("请添加观看权限");
        return;
      } else if (data.permission == 17 || data.permission == 18) {
        if (data.price == null) {
          this.$message.error("请添加价格");
          return;
        }
      } else if (data.showDesc) {
        if (data.desc == "") {
          this.$message.error("请添加课程详情");
          return;
        }
      } else if (data.showCourseCatalog) {
        if (this.showWatchPermission == null) {
          this.$message.error("设置是否试看");
        }
      } else if (data.showDatum) {
        if (data.datumArr.length == 0) {
          this.$message.error("请添加资料");
          return;
        }
      }

      if (data.parentCatId == this.parentOptions[2].catId) {
        if (data.catalog == 0) {
          data.courseType = 1;
        } else {
          data.courseType = 0;
        }
      } else {
        data.courseType = 2;
      }

      data.showDesc = data.showDesc ? 1 : 0;
      data.showCourseCatalog = data.showCourseCatalog ? 1 : 0;
      data.showDatum = data.showDatum ? 1 : 0;
      data.showComment = data.showComment ? 1 : 0;
      this.postForm.watchPermission = "";
      if (data.showCourseCatalog && this.showWatchPermission == 1) {
        for (let i = 0; i < this.watchPermission.length; i++) {
          const element = this.watchPermission[i].page;
          this.postForm.watchPermission += element + ",";
        }
      }
      if (this.postForm.permission == 19) {
        this.postForm.price = "";
      }
      this.btnLoading = true;
      if (this.isEdit) {
        this.handleUpdate();
      } else {
        this.handleCreate();
      }
    },
    handleCreate() {
      createCourse(this.postForm)
        .then(res => {
          if (res.data.statusCode == 200) {
            this.$notify({
              title: "提示",
              message: "提交成功!",
              type: "success"
            });
            this.btnLoading = false;
            this.$router.go(-1);
          } else {
            this.btnLoading = false;
            this.$notify({
              title: "提示",
              message: "提交失败!",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.btnLoading = false;
        });
    },
    handleUpdate() {
      const courseId = this.$route.query.courseId;
      // if (condition) {
      //   this.watchPermission
      // }
      if (this.postForm.course) {
        if (typeof this.postForm.course[0] == "object") {
          var course = [];
          for (let i = 0; i < this.postForm.course.length; i++) {
            course.push(this.postForm.course[i].courseId);
          }
          this.postForm.course = course;
        }
      }

      updateCourse(courseId, this.postForm)
        .then(res => {
          if (res.data.statusCode == 200) {
            this.$notify({
              title: "提示",
              message: "提交成功!",
              type: "success"
            });
            this.btnLoading = false;
            this.$router.go(-1);
          } else {
            this.btnLoading = false;
            this.$notify({
              title: "提示",
              message: "提交失败!",
              type: "error"
            });
          }
        })
        .catch(err => {
          this.btnLoading = false;
        });
    },
    cancelRel(type, index) {
      this.postForm.datumArr.splice(index, 1);
    },
    hideAddRelated(msg) {
      for (let i = 0; i < msg.length; i++) {
        const element = msg[i];
        this.$set(msg[i], "downloadstatus", 1);
        this.$set(msg[i], "lookstatus", 1);
      }
      this.objData.push(...msg);
      this.isShowAddRelated = false;
    },
    addRelObj(relType, objData) {
      this.relType = relType;
      this.objData = objData;
      this.isShowAddRelated = true;
    },
    //视频上传进度
    uploadVideoProcess(event, file, fileLis) {
      this.videoFlag = true;
      this.videoUploadPercent = parseFloat(file.percentage.toFixed(1));
    },
    //视频上传成功
    handleVideoSuccess(res, file) {
      if (res.key) {
        this.postForm.courseVideo = this.baseUrl + res.key;
        this.$message({
          message: "上传成功!",
          type: "success"
        });
      } else {
        this.$message.error("上传失败，请稍候再试!");
      }
      this.videoFlag = false;
    },
    //视频上传验证
    beforeVideoUpload(file) {
      const isVideo = file.type === "video/mp4";
      const isLt = file.size / 1024 / 1024 < 100;
      if (!isVideo) {
        this.$message.error("上传视频只能是 MP4 格式!");
      }
      if (!isLt) {
        this.$message.error("上传视频大小不能超过 100MB!");
      }
      return isVideo && isLt;
    },
    handleBeforeUpload(file) {
      console.log("上传文件之前触发啊、。。。");
      const isImg = file.type == "image/jpeg" || file.type == "image/png";
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG 或 PNG 格式");
      }
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB!");
      }
      return isImg && isLt3M;
    },
    handleBannerSuccess(response, file, fileList) {
      if (response.statusCode == 200) {
        this.postForm.banner.push({
          cbId: null,
          courseId: null,
          url: response.data.imageUrl,
          sort: null
        });
      } else {
        this.$message.error("上传失败，请稍候再试!");
      }
    },
    handleRemove(file, fileList) {
      this.postForm.banner.splice(this.postForm.banner.indexOf(file), 1);
      var data = { imgUrl: file.url };
      delImg(data)
        .then(res => {})
        .catch(err => {});
    },
    initOption() {
      getLecturerList()
        .then(res => {
          this.lecturerList = res.data.data.data;
        })
        .catch(err => {});
      getParentCategories()
        .then(res => {
          this.parentOptions.push(...res.data.data);
        })
        .catch(err => {});
      getPermissionOptions().then(res => {
        this.coursePermitOptions = res.data.data;
      });
      getQiniuToken()
        .then(res => {
          this.formData.token = res.data.data.token;
          this.baseUrl = res.data.data.baseUrl;
        })
        .catch(err => {});
    },
    getCourse() {
      getCourseList(this.listQuery).then(res => {
        this.courseTotal = res.data.data.list.total * 2;
        this.courseList = res.data.data.list.data;
      });
    },
    selectFirst() {
      this.postForm.childCatId = "";
      this.postForm.childCatIds = "";
      getChildCategories(this.postForm.parentCatId).then(res => {
        this.secondList = res.data.data;
      });
    },
    selectSecond() {
      this.postForm.childCatIds = "";
      getChildCategories(this.postForm.childCatId).then(res => {
        this.thirdList = res.data.data;
      });
    },
    async initData() {
      if (this.isEdit) {
        const courseId = this.$route.query.courseId;
        this.formLoading = true;
        await getCourse(courseId)
          .then(res => {
            getChildCategories(res.data.data.data.parentCatId).then(res => {
              this.secondList = res.data.data;
            });
            getChildCategories(res.data.data.data.childCatId).then(res => {
              this.thirdList = res.data.data;
            });
            this.postForm = res.data.data.data;
            if (this.postForm.watchPermission) {
              this.showWatchPermission = 1;
              this.watchPermission = [];
              var tmpWP = this.postForm.watchPermission.split(",");
              for (let i = 0; i < tmpWP.length; i++) {
                const element = tmpWP[i];
                this.watchPermission.push({ page: element });
              }
              this.watchPermission.pop();
            }

            this.postForm.showDesc = this.postForm.showDesc == 1 ? true : false;
            this.postForm.showCourseCatalog =
              this.postForm.showCourseCatalog == 1 ? true : false;
            this.postForm.showDatum =
              this.postForm.showDatum == 1 ? true : false;
            this.postForm.showComment =
              this.postForm.showComment == 1 ? true : false;

            // if (this.postForm.parentCatId == this.coursePermitOptions[1].catId) {
            this.courseTable = this.postForm.course;
            // }
            // for (const i in this.postForm) {
            //   if (i == 'datumArr') {
            //     for (let j = 0; j < this.postForm[i].length; j++) {
            //       this.postForm[i][j].downloadstatus = 0;
            //       this.postForm[i][j].lookstatus = 0;
            //     }
            //   }
            // }

            this.encodeUserId = res.data.data.encodeUserId;
            // this.handlePostForm();
            this.formLoading = false;
          })
          .catch(err => {
            this.formLoading = false;
          });
      } else {
        const postData = this.$route.params.postData;
        if (postData) {
          delete postData.courseId;
          delete postData.columnId;
          this.postForm = postData;
          this.encodeUserId = this.$route.params.encodeUserId;
          //   this.handlePostForm();
        }
      }
    }
  },
  watch: {
    currentPage1(val) {
      console.log(val);
      var data = {
        page: val,
        limit: 5,
        type: "noColumn"
      };
      var tmpArray = [];
      getCourseList(data).then(res => {
        this.courseTotal = res.data.data.list.total * 2;
        this.courseList = res.data.data.list.data;
      });
    }
  },
  mounted() {
    this.initOption();
    this.initData();
    this.getCourse();
  },
  components: {
    Tinymce,
    addRelated
  },
  computed: {}
};
</script>

<style scoped>
</style>